<template>
  <view class="card-box" @click="tapMore(info)"
    :data-spmCntSuffix="'ChatAiPage.aiPhotoCard@1.more'"
    :data-custom="1"
    :data-spm="1">
    <view class="card-title">
      <img
        :src="info.args.cardTitle.titleIcon || 'https://cdn1.visiotrip.com/h5AndMini/2023-11-17/photo-icon.png'"
        class="title-icon"
      />
      <view class="title-txt single-line-text">{{ info.args.cardTitle.content || 'AI写真' }}</view>
    </view>
    <view class="card-line"></view>
    <view class="card-content" v-if="info.coverUrl">
      <image
        class="card-img"
        mode="aspectFill"
        :src="info.coverUrl"
      />
    </view>
    <block v-for="(item, index) in info.args.cardContent" :key="index">
      <view class="card-content">
        <image
          class="card-img"
          mode="aspectFill"
          :src="item.imgUrl || info.coverUrl"
        />
      </view>
    </block>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    info: {
      type: Object,
    },
    type: {
      type: String,
    }
  },
  data() {
    return {
      marketDetailData: "",
    };
  },
  mounted() {},
  methods: {
    async tapMore(info) {
      console.log(!this.$isLogin())
      if (!this.$isLogin()) {
        return;
      }
      if (this.type) {
        // 迪士尼独家指南
        if (info.type === 306) {
          this.$navTo("/packageAI/pages/disneyGuideDetail/disneyGuideDetail", {}, "navigateTo");
          return
        }
        // 如果使用过权益，跳转至我的写真-已解锁
        const used = info.args?.cardContent?.[0].used
        if (used) {
          this.$navTo("/packageUserCenter/pages/aigc/myPhoto", {
            isUnlock: true,
          }, "navigateTo");
          return
        }
        this.$navTo("/packageUserCenter/pages/aigc/aiPhoto", {}, "navigateTo");
      } else {
        const idsArr = this.info.photoAndTemplateId.split(",")
        const tempId = idsArr[1]
        const photoId = idsArr[0]
        this.$navTo("/packageUserCenter/pages/aigc/aiSharePhoto", {
          albumsId: this.info.packageId,
          photoId,
          packageId: tempId,
        }, "navigateTo");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card-box {
  position: relative;
  overflow: hidden;
  border-radius: 26rpx;
  backdrop-filter: blur(10.8695652173913px);
  width: 100%;
  height: 290rpx;
  border: 4rpx solid rgba(231, 248, 255, 1);
  background: linear-gradient(137deg, #dafbff 0%, #cbd7ff 100%);
  margin: 20rpx auto 0 auto;
  .card-title {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 24rpx;
    height: 73rpx;
    border-radius: 26rpx;
    .title-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 8rpx;
    }
    .title-txt {
      height: 28rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: $sl-color-black;
      line-height: 28rpx;
      flex: 1;
    }
  }
  .card-line {
    width: 456rpx;
    height: 1rpx;
    border: 1rpx dashed #bed4e5;
    margin: 0 auto;
  }
  .card-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 26rpx;
    padding: 24rpx;
    .card-img {
      width: 454rpx;
      height: 166rpx;
      border-radius: 16rpx;
    }
    .content-text {
      height: 28rpx;
      font-size: 20rpx;
      font-weight: 500;
      color: #5bc1ff;
      line-height: 28rpx;
    }
  }
}
// .card-box::before {
//   content: "";
//   position: absolute;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   border: 4px solid;
//   border-image: linear-gradient(132deg, rgba(231, 248, 255, 1), rgba(255, 255, 255, 1), rgba(240, 242, 255, 1)) 4 4;
// }
</style>
